<template>
  <div class="dashboard-container">
    <!-- 头部内容 -->
    <el-card class="header-card">
      <el-row type="flex" :gutter="20">
        <el-col>
          <el-card>
            <div class="heardtou">
              <div class="heardtext">自己房源</div>
              <div class="heardcontai">
                <el-avatar
                  shape="circle"
                  :size="100"
                  src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/fd039245d688d43ffb7de8bd7a1ed21b0ff43bac.jpg"
                />
                <span class="spantext">83/340</span>
                <el-button size="small" type="primary">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card>
            <div class="heardtou">
              <div class="heardtext">录入房源 </div>
              <div class="heardcontai">
                <el-avatar
                  shape="circle"
                  :size="100"
                  src="https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=a09aedea28dda3cc0bb1b02434d91537/a1ec08fa513d2697b2427c2853fbb2fb4316d836.jpg"
                />
                <span class="spantext">25/34</span>
                <el-button size="small" type="primary">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card>
            <div class="heardtou">
              <div class="heardtext">下架房源</div>
              <div class="heardcontai">
                <el-avatar
                  shape="circle"
                  :size="100"
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F10%2F20170710223808_tHkfT.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662803701&t=65aa7f7d3128e2bb0fd0754f5df91b7f"
                />
                <span class="spantext">22/550</span>
                <el-button size="small" type="primary">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card>
            <div class="heardtou">
              <div class="heardtext">系统消息提示</div>
              <div class="heardcontai">
                <el-avatar
                  shape="circle"
                  :size="100"
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.ali213.net%2Fpicfile%2FNews%2F2014%2F08%2F24%2Fpm%2F20140824165124099.jpg&refer=http%3A%2F%2Fimg1.ali213.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662804177&t=ba52ddd92978b541717cd983bcfbfe79"
                />
                <span class="spantext">99+</span>
                <el-button size="small" type="primary">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!-- 主要内容 -->
    <el-row type="flex" justify="space-between">
      <!-- 左侧内容 -->
      <el-col :span="13" style="padding-right: 26px">
        <!-- 工作日历 -->
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>主攻楼房</span>
          </div>

          <el-carousel :interval="intervalTiem" type="card" height="200px">
            <el-carousel-item v-for="item in imgList" :key="item.img">
              <!-- <h3 class="medium">{{ item }}</h3> -->
              <img :src="item.src" style="height: 100%; width: 100%">
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <!-- 公告 -->
        <el-card class="box-card">
          <div class="advContent">
            <div class="title">公告</div>
            <div class="contentItem">

              <el-carousel :interval="3000" height="350px" direction="vertical" :autoplay="true">
                <el-carousel-item v-for="item in content" :key="item.text">
                  <p v-for="item in content" :key="item.text"> <i class="el-icon-s-opportunity" />  新楼盘上线：{{ item.text }}</p>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 右侧内容 -->
      <el-col :span="11">
        <el-card class="box-card">
          <div class="header headTit">
            <span>房产信息</span>
          </div>
          <div class="sideNav">
            <el-button class="sideBtn" type="primary">新房详情</el-button>
            <el-button class="sideBtn" type="primary">二手房</el-button>
            <el-button class="sideBtn" type="primary">租房</el-button>
            <el-button class="sideBtn" type="primary">商铺出租</el-button>
          </div>
        </el-card>

        <!-- 绩效指数 -->
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>绩效指数</span>
          </div>

          <Rabar />
        </el-card>

        <el-card class="box-card">
          <div class="header headTit">
            <span>帮助链接</span>
          </div>
          <div class="sideLink">
            <el-row>
              <el-col :span="8">
                <a href="#">
                  <span class="icon iconGuide" />
                  <p>入门指南</p>
                </a>
              </el-col>
              <el-col :span="8">
                <a href="#">
                  <span class="icon iconHelp" />
                  <p>在线帮助手册</p>
                </a>
              </el-col>
              <el-col :span="8">

                <el-popover
                  placement="right"
                  width="400"
                  trigger="hover"
                >
                  <el-table :data="gridData">
                    <el-table-column width="100" property="region" label="地区" />
                    <el-table-column width="100" property="name" label="姓名" />
                    <el-table-column width="200" property="address" label="电话" />
                  </el-table>
                  <div slot="reference">
                    <span class="icon iconTechnology" />
                    <p>联系技术支持</p></div>
                </el-popover>

              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Rabar from './components/rabar.vue'
export default {
  components: { Rabar },
  computed: {
    ...mapGetters(['name', 'avatar'])
  },
  data() {
    return {
      gridData: [{
        region: '中国东部',
        name: '玉小豪',
        address: '11111111111'
      }, {
        region: '中国西部',
        name: '王老五',
        address: '2222222222'
      }, {
        region: '中国南部',
        name: '张小三',
        address: '333333333333'
      }],

      imgList: [
        {
          src: require('../../assets/common/city.jpg')
        },
        {
          src: require('../../assets/common/001.jpeg')
        },
        {
          src: require('../../assets/common/003.webp')
        },
        {
          src: require('../../assets/common/004.webp')
        },
        {
          src: require('../../assets/common/005.webp')
        },
        {
          src: require('../../assets/common/006.webp')
        }
      ],
      content: [
        {
          text: '龙光天瀛新增一套3房2厅,坐北朝南，120平的房子！'
        },
        {
          text: '普罗旺斯新增一套2房2厅,坐北朝南，1220平的房子！'
        },
        {
          text: '星海玫瑰新增一套6房2厅,坐北朝南，1330平的房子！'
        },
        {
          text: '方天州山新增一套5房2厅,坐北朝南，320平的房子！'
        },
        {
          text: '雅源阁新增一套7房4厅,坐北朝南，620平的房子！'
        },
        {
          text: '阳光西岸新增一套2房2厅,坐北朝南，80平的房子！'
        }
      ],

      intervalTiem: 1500,
      tiem: new Date()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 10px;
  li {
    list-style: none;
  }
  .headImg {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #999;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .headInfoTip {
    padding: 25px 0 0;
    margin-left: 120px;
    p {
      padding: 0 0 15px;
      margin: 0;
      &.firstChild {
        font-size: 24px;
      }
      &.lastChild {
        font-size: 20px;
        color: #7f8c8d;
      }
    }
  }
}

.box-card {
  padding: 5px 10px;
  margin-top: 20px;
  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }
    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }
  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}
.header-card {
  position: relative;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
}

.advContent {
  background: #fff;
  border-radius: 5px 5px 0px 0px;
  .title {
    font-size: 16px;
    padding: 20px;
    font-weight: bold;
    border-bottom: solid 1px #ccc;
  }
  .contentItem {
    padding: 0 30px;
    min-height: 350px;
    .item {
      display: flex;
      padding: 18px 0 10px;
      border-bottom: solid 1px #ccc;
      .col {
        color: #8a97f8;
      }
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 10px;
      }
      p {
        padding: 0 0 8px;
      }
    }
  }
}
.noticeList {
  margin: 0;
  padding: 0;
}
.sideNav,
.sideLink {
  padding: 30px 12px;
  .sideBtn {
    padding: 16px 26px;
    font-size: 16px;
    margin: 10px 5px;
  }
}
.sideLink {
  text-align: center;
  .icon {
    display: inline-block;
    width: 76px;
    height: 76px;
    background: url("./../../assets/common/icon.png") no-repeat;
  }
  .iconGuide {
    background-position: 0 0;
  }
  .iconHelp {
    background-position: -224px 0;
  }
  .iconTechnology {
    background-position: -460px 0;
  }
}
.quwei {
  margin-top: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.heardtou{
.heardtext{
  color: cornflowerblue;
  margin-bottom: 20px;
margin-left: 10px;
cursor: pointer;
&:hover{
  color: rgb(248, 122, 177);
}
}
}
 .heardcontai{
span{
  vertical-align: middle;

}

  }
  .spantext{
margin:0 15px 0px 15px;
  color: rgb(229, 133, 166);
  border: 1px solid rgb(229, 133, 166);
  border-radius: 5px;
font-size: 14px;
  }
  .el-button{
    font-size: 12px;
    padding: 5px;
  }
   .el-carousel__item h3 {
    color: black;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #ffffff;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #ffffff;
  }
  i{
    color: rgb(227, 107, 191);
  }
</style>
